<template>
  <div class="shopinginfo">
      <!-- 左边 -->
       
        <div class="Leftbox">
            <input type="checkbox" :id='cid' :checked="state" @change="stateChange">
            <label :for='cid'>
                 <img src="../assets/logo.png" alt="图片">
            </label>
           
        </div>
        <!-- 右边 -->
        <div class="rightbox">

                <h6>{{title}}</h6>
           
            <div class="con_footer">
            <!-- 价格 -->
            <span class="red itemprice" >￥ {{price}}</span>
            <!-- 数量 -->
            <Count :count="count" :id='cid'/>
            </div>
            
        </div>
  </div>
</template>

<script>
import Count from '../components/Count.vue'
export default {
   components:{
       Count
   },
   props:{
       title:{
           type:String,
           default:'Vue全套视频教程，从vue2.0到vue3.0一套全覆盖，前端必会的框架Vue全套视频'
       },
       price:{
           type:Number,
           default:0
       },
       count:{
           default:1,
           type:Number
       },
       state:{
           type:Boolean,
           default:false
       },
       cid:{
            type:Number
       }

   },
   data:function(){
       return {}
   },
   methods:{
       stateChange(e){
           const newstate = e.target.checked;
           this.$emit('state-change',{id:this.cid,value:newstate});
       }
   }
   

}
</script>

<style>
 .shopinginfo{
     height: 80px;
     display: flex;
     justify-content: flex-start;
     padding-left: 10px;
     border-bottom: 1px solid #000;
     margin-bottom: 10px;
 }
 .Leftbox{
     min-width: 100px;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
 .Leftbox img{
    height: 80px;
    width: 80px;
 }
 .rightbox{
    height: 100%;
    margin-left: 10px;
    position: relative;
    /* display: flex;
    flex-direction: column;
    justify-content: space-between; */
    
 }
 h6{
    font-size: 12px;
    font-weight: bold;
   
 }
 .con_footer{
     position: absolute;
     left: 0;
     bottom: 0;
     width: 100%;
 }
 .itemprice{
     float: left;
 }
 .red{
     color: red;
 }
</style>